<html>

<head>
  <title>RoughJS Map example with D3.js - Canvas</title>
  <script src="https://rawgit.com/pshihn/workly/master/dist/workly.min.js"></script>
  <script src="https://rawgit.com/pshihn/rough/master/dist/rough.min.js"></script>
  <script src="//d3js.org/d3.v3.min.js"></script>
  <script src="//d3js.org/topojson.v1.min.js"></script>
</head>

<body>
  <h2>RoughJS Map with D3.js using WebWorker (Canvas)</h2>
  <canvas id="canvas" width="960" height="500"></canvas>

  <script>
    const rc = rough.canvas(document.getElementById('canvas'), {
      async: true,
      options: {
        simplification: 0.2, roughness: 0.65
      }
    });
    const width = 960, height = 500;
    const projection = d3.geo.albersUsa().scale(1070).translate([width / 2, height / 2]);
    const path = d3.geo.path().projection(projection);
    const randomColor = () => {
      let r = `rgb(${Math.round(Math.random() * 255)}, ${Math.round(Math.random() * 255)}, ${Math.round(Math.random() * 255)})`;
      return r;
    }
    const randomAngle = () => {
      return (Math.random() > 0.5 ? -1 : 1) * (1 + Math.random() * 88);
    }
    const randomStyle = () => {
      return (Math.random() > 0.5 ? 'solid' : '');
    }
    d3.json("./us.json", async (error, us) => {
      if (error) throw error;
      let topo = topojson.feature(us, us.objects.states).features;
      for (let feature of topo) {
        rc.path(path(feature), {
          fill: randomColor(),
          fillStyle: randomStyle(),
          hachureAngle: randomAngle()
        });
      }
    });
  </script>
</body>

</html>